<template>
	<view class="content">
		<view class="example">
			<overhaul-step :bidding="isBidding" :active="active" />
			<view class="buttn">
				<button type="primary" @click="submitData">提交</button>
			</view>
		</view>
		<view class="criter_bt">
			<view class="line"></view>
			<text>基本信息</text>
		</view>
		<view class="dec_main">
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>申请人员：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.create_user_name}}</text>
				</view>
			</view>
			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>所属部门：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.apply_dept_name}}</text>
				</view>
			</view>
			<view class="dec_li">
				<view class="dec_le">
					<label>申报时间：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.create_date}}</text>
				</view>
			</view>
		</view>
		<view class="criter_bt">
			<view class="line"></view>
			<text>检修信息</text>
		</view>
		<view class="dec_main">
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*检修类型：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.overhaul_type_desc}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*单据类型：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.bill_type_desc}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*施工类型：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.build_type_desc}}</text>
				</view>
			</view>
			<view v-if="showBuild">
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*施工单位：</label>
					</view>
					<view class="dec_ri">
						<text>{{jsonData.build_unit}}</text>
					</view>
				</view>
				<view class="dec_li dec_flex">
					<view class="dec_le">
						<label>*单位负责人：</label>
					</view>
					<view class="dec_ri">
						<text>{{jsonData.build_person}}</text>
					</view>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*检修设备：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.device_name}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex">
				<view class="dec_le">
					<label>*设备位号：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.device_no}}</text>
				</view>
			</view>
			<view class="dec_li dec_flex" v-if="jsonData.work_hours">
				<view class="dec_le">
					<label>工时：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.work_hours}}</text>
				</view>
			</view>
			<view class="dec_li " v-if="jsonData.pics.length>0">
				<view class="dec_le">
					<label>拍照取证：</label>
				</view>
				<view class="dec_ri">
					<view class="pic-view">
						<view style="width: 70%; display: flex;">
							<view v-for="(jtem, j) in jsonData.pics" :key="j" style="margin: 10rpx;">
								<image :src="fileUrl + jtem.pic_url" class="detail_img" @click="previewImg(j)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="dec_li">
				<view class="dec_le">
					<label>*检修内容：</label>
				</view>
				<view class="dec_ri">
					<text>{{jsonData.check_content}}</text>
				</view>
			</view>
		</view>

		<!-- 安全措施 -->
		<view v-if="safetyCfgs.length > 0">
			<view class="criter_bt">
				<view class="line"></view>
				<text>安全措施</text>
			</view>

			<div class="cfg-item" style="display: flex;align-items: center;">
				<label style="margin-right: 20rpx;">全部:</label>
				<radio-group @change="radioChangeFu($event)">
					<label>
						<radio value="1" color="#267DFF" :checked="result == 1" style=" transform:scale(0.8)" />
						<text style="margin-left: 10rpx;">是</text>
					</label>
					<label>
						<radio value="2" color="#267DFF" :checked="result == 2" style=" transform:scale(0.8)" />
						<text style="margin-left: 10rpx;">否</text>
					</label>
					<label>
						<radio value="3" color="#267DFF" :checked="result == 3" style=" transform:scale(0.8)" />
						<text style="margin-left: 10rpx;">不涉及</text>
					</label>
				</radio-group>
			</div>
			<view class="cfg-item" v-for="(item, i) in safetyCfgs" :key="i">
				<view class="cfg-title">风险分析</view>
				<view class="cfg-content">{{item.risk_desc}}</view>
				<view class="cfg-title">安全措施</view>
				<view class="cfg-content">{{item.safe_measure}}</view>
				<view>
					<radio-group @change="radioChange($event, i)">
						<label>
							<radio value="1" color="#267DFF" :checked="item.result == 1"
								style=" transform:scale(0.8)" /><text style="margin-left: 10rpx;">是</text>
						</label>
						<label>
							<radio value="2" color="#267DFF" :checked="item.result == 2"
								style=" transform:scale(0.8)" /><text style="margin-left: 10rpx;">否</text>
						</label>
						<label>
							<radio value="3" color="#267DFF" :checked="item.result == 3"
								style=" transform:scale(0.8)" /><text style="margin-left: 10rpx;">不涉及</text>
						</label>
					</radio-group>
				</view>
			</view>

			<view class="dec_li dush_li">
				<view class="dec_le">
					<label>补充措施：</label>
				</view>
				<view class="dec_ri">
					<uni-easyinput type="textarea" v-model="desc" maxlength="500"
						placeholder="请描述备注内容,500字以内"></uni-easyinput>
				</view>
			</view>
		</view>

		<view>
			<view class="criter_bt">
				<view class="line"></view>
				<text>检修确认</text>
			</view>

			<view class="dush_li bottom-view" style="padding-top: 20rpx;">
				<view class="dec_le">
					<view class="dec_li">
						<label>*值班工艺：</label>
					</view>
				</view>
				<view  style="flex: 0.6;">
					<!-- <uni-combox :candidates="dutys" placeholder="请选择值班工艺" v-model="dutyName"></uni-combox> -->
					
						<uni-data-select v-model="dutyName" :localdata="dutys"></uni-data-select>
				</view>
			</view>

			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*签字确认：</label>
				</view>
				<view class="sign-view">
					<image :src=" 'data:image/svg+xml;base64,' + signStr2" v-if="signStr2 != ''"></image>
					<Signature ref="sig2" v-model="signStr2" class="signture"></Signature>
					<text @click="startSign2()">+</text>
				</view>
			</view>


			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>{{showBuild?"*负责人":"*主修人"}}：</label>
				</view>
				<view class="dec_ri">
					<text>{{userName}}</text>
				</view>
			</view>
			<view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*签字确认：</label>
				</view>
				<view class="sign-view">
					<image :src=" 'data:image/svg+xml;base64,' + signStr" v-if="signStr != ''"></image>
					<Signature ref="sig" v-model="signStr" class="signture"></Signature>
					<text @click="startSign()">+</text>
				</view>
			</view>


			<!-- <view class="dec_li dush_li bottom-view">
				<view class="dec_le">
					<label>*许可检修时间：</label>
				</view>
				<view class="dec_ri">
					<uni-datetime-picker type="datetime" class="m-picker" v-model="permissionDate" :border="false" :clearIcon="false"/>
				</view>
			</view> -->

		</view>


	</view>
</template>

<script>
	import OverhaulStep from '@/components/selfs/OverhaulStep.vue'
	import Signature from '@/components/sin-signature/sin-signature.vue'
	import {
		getFormatDateTime
	} from '@/utils/date-util.js'
	import {
		svg2Png
	} from '@/utils/base64.js'
	import {
		FILE_URL,
		saveOverhaulConfirm,
		queryCheckCfgList,
		getUserByDept
	} from '@/api/maintenance/selfs.js'
	export default {
		components: {
			OverhaulStep,
			Signature
		},
		data() {
			return {
				isBidding: false,
				active: 3,
				type: 0,
				userName: '',
				userId: '',
				deptName: '',
				deptId: '',
				signStr: '',
				signPng: '',
				signStr2: '',
				signPng2: '',
				now: '',
				permissionDate: '',
				jsonData: {},
				fileUrl: FILE_URL,
				desc: '',
				safetyCfgs: [],
				dutys: [],
				dutyName: '',
				users: [],
				showBuild: false,
				result: 1
			}
		},
		methods: {
			dateChange(e) {
				this.permissionDate = e.detail.value
			},
			radioChangeFu(evt) {
			  this.safetyCfgs.forEach((v, index) => {
			   v.result = evt.detail.value;
			  });
			  this.$forceUpdate()
		
			},
			radioChange: function(evt, i) {
				console.log(evt.detail.value)
				this.safetyCfgs[i].result = evt.detail.value
				console.log(this.safetyCfgs[i].result, "123456");
				// if('r1' === evt.detail.value) {
				// 	this.safetyCfgs[i].result = 1
				// } else if('r2' == evt.detail.value) {
				// 	this.safetyCfgs[i].result = 2
				// } else {
				// 	this.safetyCfgs[i].result = 3
				// }
			},
			previewImg(index) {
				let pics = []
				for (let i = 0; i < this.jsonData.pics.length; i++) {
					pics[i] = this.fileUrl + this.jsonData.pics[i].pic_url
					console.log('PREVIEW', pics[i])
				}
				uni.previewImage({
					urls: pics,
					current: index
				});
			},

			async startSign() {
				let s = await this.$refs.sig.getSyncSignature();
				svg2Png(s, (e) => {
					this.signPng = e
					console.log('签名数据', this.signPng);
				})

			},

			async startSign2() {
				let s = await this.$refs.sig2.getSyncSignature();
				svg2Png(s, (e) => {
					this.signPng2 = e
					console.log('签名数据2', this.signPng2);
				})

			},

			fetchCfgs() {
				let params = {
					user_id: this.userId,
					dept_id: this.deptId
				}
				uni.showLoading({
					title: '正在查询...'
				})
				queryCheckCfgList(params).then(res => {
					this.safetyCfgs = res.datas
					for (let i = 0; i < this.safetyCfgs.length; i++) {
						this.safetyCfgs[i].result = 1
					}
				})
			},
			fetchDutys() {
				let params = {
					dept_id: this.jsonData.use_dept
				}
				getUserByDept(params).then(res => {
					this.users = res.datas
					// for (let i = 0; i < this.users.length; i++) {
					// 	this.dutys.push(this.users[i].user_name)
					// }
					this.dutys = res.datas.map(v=>{
						return{
							text:v.user_name,
							value:v.user_id
						}
					})
				})
			},

			submitData() {
				console.log(this.dutyName,"____");
				if (this.signStr == '' || this.signStr2 == '') {
					uni.showToast({
						title: '请签名确认',
						icon: 'none'
					})
					return
				}
				// if(this.permissionDate == '') {
				// 	uni.showToast({
				// 		title: '请选择许可检修时间',
				// 		icon: 'none'
				// 	})
				// 	return
				// }

				if (this.dutyName == '') {
					uni.showToast({
						title: '请选择值班工艺',
						icon: 'none'
					})
					return
				}

				// if (this.dutys.indexOf(this.dutyName) < 0) {
				// 	uni.showToast({
				// 		title: '请选择值班工艺',
				// 		icon: 'none'
				// 	})
				// 	return
				// }

				let params = {
					user_id: this.userId,
					// duty_user: this.users[this.dutys.indexOf(this.dutyName)].user_id,
					duty_user:this.dutyName,
					plan_id: this.jsonData.plan_id,
					overhaul_id: this.jsonData.overhaul_id,
					check_id_array: JSON.stringify(this.safetyCfgs),
					major_sign: this.signPng,
					monitor_sign: this.signPng2,
					supplement_desc: this.desc
				}
				uni.showLoading({
					title: '正在提交'
				})
				saveOverhaulConfirm(params).then(res => {
					uni.$emit('confirm_refresh')
					uni.showToast({
						title: '提交成功',
						icon: 'success',
						duration: 1500
					})
					setTimeout(function() {
						// uni.navigateBack({})
						window.android.backWeb();
					}, 500)
				})
			}
		},
		onLoad: function(e) {
			this.type = e.type
			this.userName = e.userName
			this.userId = e.userId
			this.deptName = e.deptName
			this.deptId = e.deptId
			this.jsonData = JSON.parse(e.jsonData)
			this.fetchCfgs()
			this.fetchDutys()
			this.now = getFormatDateTime()
			setTimeout(() => {
				this.permissionDate = getFormatDateTime()
			}, 500)
			this.isBidding = (this.jsonData.is_bidding == 1)
			if (!this.isBidding) {
				this.active = this.active - 1
			}
			this.showBuild = (this.jsonData.bill_type == 3)
		}
	}
</script>

<style>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}

	view {
		font-size: 28upx;
		line-height: inherit
	}

	.content {
		width: 100%;
		margin: 0 auto 80upx;
	}

	.example {
		width: 91%;
		margin: 20upx auto 20upx;
		padding: 0 30upx 0upx
	}

	.example-body {
		padding: 0 40upx
	}

	.buttn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 5;
		padding: 20rpx;
		display: flex;
		justify-content: center;
		background-color: #FFF;
		
	}
	
	.buttn button {
		font-size: 30upx;
		background: #267dff;
		border-radius: 0;
		flex: 1;
		border-radius: 8rpx;
	}

	.criter_bt {
		padding: 0 10px;
		height: 50px;
		background-color: #f7f7f7;
		font-weight: normal;
		display: flex;
		align-items: center;
		flex-direction: row;
	}

	.line {
		width: 8upx;
		height: 30upx;
		background: #267DFF;
		border-radius: 10upx;
		display: inline-block;
		vertical-align: middle;
	}

	.criter_bt text {
		padding-left: 10upx;
		vertical-align: middle;
		font-size: 32upx;
		color: #333333;
	}

	.dec_main {
		width: 94%;
	}

	.dec_li {
		width: 96%;
		margin: 30rpx 20rpx;
		overflow: hidden;
	}

	.dush_li {
		border-bottom: 1upx solid #f4f4f4;
		padding-bottom: 20upx;
	}

	.dec_le {
		width: 30%;
		float: left;
	}

	.dec_ri {
		float: left;
		width: 70%;
	}

	.dec_flex {
		min-height: 60rpx;
		display: flex;
		align-items: center;
	}

	.dec_li label {
		color: #267DFF;
		font-size: 30upx;
	}

	.dec_li text {
		color: #666666;
		font-size: 30upx;
	}

	.dec_li .inppu {
		font-size: 30upx;
	}

	.sign-view {
		display: flex;
		align-items: center;
	}

	.sign-view image {
		width: 150rpx;
		height: 60rpx;
		border: #d4ced8 solid 1rpx;
		border-radius: 5rpx;
		margin-right: 30rpx;
	}

	.sign-view text {
		width: 150rpx;
		height: 60rpx;
		border: #267DFF solid 1rpx;
		border-radius: 5rpx;
		color: #267DFF;
		font-size: 45rpx;
		text-align: center;
	}

	.signture {
		width: 0;
		height: 0;
	}

	.m-picker {
		margin-left: -25rpx;
	}

	.bottom-view {
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	.detail_img {
		width: 150rpx;
		height: 150rpx;
		border: #f4f4f4 solid 1rpx;
	}

	.pic-view {
		display: flex;
		align-items: center;
	}

	.cfg-item {
		padding: 20rpx;
		border-bottom: 1upx solid #f4f4f4;
	}

	.cfg-title {
		font-size: 32rpx;
		color: #267DFF;
	}

	.cfg-content {
		font-size: 28rpx;
		margin-bottom: 10rpx;
	}
</style>